<template>
	<view class="home-container">
		<!-- #ifdef H5 -->
		<view class="download" v-show="isShowDownload">
			<i class="icon1" @click="isShowDownload=false"></i>
			<i class="icon2"></i>
			<span class="tips">用冻品交易港APP体验更好</span>
			<i class="icon3" @click="$handleOpenUrl('/pages/code/index?source=h5', 99)">立即下载</i>
		</view>
		<!-- #endif -->
		<view class="home-body">
			<view class="home-banner">
				<swiper class="swiper" :autoplay="true" circular="true" :indicator-dots="true" indicator-color="rgba(255,255,255,.5)"
				 indicator-active-color="#fff">
					<swiper-item v-for="item in imgs" :key="item.id">
						<!-- 不可为全路径 -->
						<image :src="item.path" @click="item.url&&$handleOpenUrl(item.url)"/>
					</swiper-item>
				</swiper>
			</view>

			<view class="servie_more" v-if="adList.length">
				<view class="ul">
					<view class="li" v-for="item in adList" :key="item.title" @click="handleJump(item.url)">
						<image :src="item.path" class="img1" />
						<view class="span">{{item.title}}</view>
					</view>
					<!-- <view class="li" @click="$handleOpenUrl('/pages/shop/index',0)">
						<image src="https://oss-shop.cciinet.com/files/MiniProgram/ser_5.png" class="img1" />
						<view class="span">供求信息</view>
					</view>
					<view class="li" @click="$handleOpenUrl('')">
						<image src="https://oss-shop.cciinet.com/files/MiniProgram/ser_2.png" class="img1" />
						<view class="span">进口代理</view>
						<image src="https://oss-shop.cciinet.com/files/MiniProgram/hot1.png" class="img2" />
					</view>
					<view class="li" @click="$handleOpenUrl('')">
						<image src="https://oss-shop.cciinet.com/files/MiniProgram/ser_3.png" class="img1" />
						<view class="span">冷链物流</view>
					</view>
					<view class="li" @click="$handleOpenUrl('')">
						<image src="https://oss-shop.cciinet.com/files/MiniProgram/ser_4.png" class="img1" />
						<view class="span">市场行情</view>
					</view>
					<view class="li" @click="$handleOpenUrl('')">
						<image src="https://oss-shop.cciinet.com/files/MiniProgram/ser_1.png" class="img1" />
						<view class="span">海外冻品</view>
					</view> -->
				</view>
			</view>
			
			<view class="ad_icon" v-if="iconUrl">
				<image class="ad_img" :src="iconUrl" @click="$handleOpenUrl('/pages/shop/index', 0)" mode="widthFix" />
			</view>
			
			<!-- 拼团活动 -->
			<view class="offer">
				<view class="offer_title">
					<view class="h1">拼团活动</view>
				</view>
			</view>
			<view class="product">
				<view class="product_item" v-for="(v, i) in groupProductList" :key="v.id" @click="handleBuy(v, i)">
					<i class="icon w_1" v-if="v.status==1">抢购中</i>
					<i class="icon w_2" v-if="v.status==0">即将开始</i>
					<i class="icon w_3" v-if="v.status==2">已售罄</i>
					<image :src="v.image" alt="" />
					<view class="h2">{{ v.productName }}</view>
					<button v-if="!userId" class="btn">查看详情</button>
					<view v-else class="p">{{ v.productPrice }}</view>
				</view>
			</view>

			<!-- 	<view class="offer">
				<view class="offer_title">
					<view class="h1">报价板</view>
					<view class="span"> 美元/KG</view>
				</view>
			</view> -->

			<!-- 	<view class="offer_content">
				<view class="offer_item" v-for="v in priceIndex" :key="v.id">
					<view class="h2">{{ v.name }}</view>
					<view class="p" :style="
			                            v.percentage == 0
			                                ? 'color:#00428E'
			                                : validate(v.percentage)
			                                ? 'color:#EA5520'
			                                : 'color:#1BB75A'
			                        ">
						{{ v.price }}
					</view>
					<view class="offer_num">
						<view class="span">{{ v.difference.toFixed(2) }}</view>
						<view class="i" :style="
			                                v.percentage == 0
			                                    ? 'color:#00428E'
			                                    : validate(v.percentage)
			                                    ? 'color:#EA5520'
			                                    : 'color:#1BB75A'
			                            ">{{validate(v.percentage)?'+':''}}{{ v.percentage.toFixed(2) }}%</view>
					</view>
				</view>
			</view> -->



			<view class="offer" @click="$handleOpenUrl('/pages/shop/index',0)">
				<view class="offer_title">
					<view class="h1">供应推荐</view>
				</view>
				<image src="https://oss-shop.cciinet.com/files/MiniProgram/right.svg" alt="" />
			</view>
			<view class="product">
				<view class="product_item" v-for="v in saleProduct" :key="v.id" @click="handleJumpurl(`/pages/shop/detail?stu=1&id=${v.id}`)">
					<image :src="v.images" alt="" />
					<view class="h2">{{ v.title }}</view>
					<button v-if="!userId" class="btn">查看详情</button>
					<view class="p" v-if="userId">{{v.goodsPrice}}{{
			                                v.priceType == 0
			                                    ? "元/吨"
			                                    : v.priceType == 1
			                                    ? "元/KG"
			                                    : v.priceType == 2
			                                    ? "美元/吨"
			                                    : v.priceType == 3
			                                    ? "美元/KG"
			                                    : ""
			                            }}</view>
				</view>
			</view>
			<!-- 圈子滚动 -->
			<!-- #ifdef !APP-PLUS -->
			<view class="offer" @click="$handleOpenUrl('/pages/circle/index',0)">
				<view class="offer_title">
					<view class="h1">生意圈</view>
				</view>
				<image src="https://oss-shop.cciinet.com/files/MiniProgram/right.svg" alt="" />
			</view>
			<view class="new-circle">
				<view class="new-circle-item" :class="animateUp?'anim':''" v-for="item in circleList" :key="item.id" @click="$handleOpenUrl('/pages/circle/index',0)">
					<view class="top">
						<view class="left">
							<image class="avatar" :src="item.headimgurl || 'https://oss-shop.cciinet.com/files/MiniProgram/circle_avatar.png'"
							 alt="">
						</view>
						<view class="right">
							<view class="title">
								<span class="name fs_28 c_333 ellipsis">{{item.nickname||''}}</span>
								<span class="fs_20 c_999">{{item.formatCreateDate}}</span>
							</view>
							<view class="content c_666 fs_28">
								<p>{{handleShowText(item.content)}}</p>
							</view>
							<!-- 有图片 -->
							<view v-if="item.fileType=='1'" class="imgs">
								<view v-for="(v) in item.fileUrl.split('|')" :key="v">
									<image :src="v" alt="">
								</view>
							</view>
							<!-- 有视频 -->
							<view v-else-if="item.fileType=='2'" class="video_box">
								<view id="poster">
									<image :src="item.fileUrl+'?x-oss-process=video/snapshot,t_0,m_fast,f_png,ar_auto'">
										<i class="iconfont icon-iconset0481"></i>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<view class="todayIndex">
				<view class="today">今日指数</view>
				<view class="index">
					<view class="p">肉类</view>
					<view class="span" :class="
			                            validate(todayIndex.meatAvgPriceMap.dateContrast)
			                                ? 'rice'
			                                : ''
			                        ">{{
			                            todayIndex.meatAvgPriceMap[getToday()]
			                                ? todayIndex.meatAvgPriceMap[
			                                      getToday()
			                                  ].toFixed(2)
			                                : 0
			                        }}</view>
					<view class="em" v-if="todayIndex.meatAvgPriceMap.dateContrast == 0">--</view>
					<image v-if="todayIndex.meatAvgPriceMap.dateContrast != 0" :src="
			                           validate(
			                                todayIndex.meatAvgPriceMap.dateContrast
			                            )
			                                ? 'https://oss-shop.cciinet.com/files/MiniProgram/rise.png'
			                                : 'https://oss-shop.cciinet.com/files/MiniProgram/decline.png'
			                        "
					 alt="" />
				</view>
				<view class="index">
					<view class="p">水产</view>
					<view class="span" :class="
			                            validate(todayIndex.seafoodAvgPriceMap.dateContrast)
			                                ? 'rice'
			                                : ''
			                        ">{{
			                            todayIndex.seafoodAvgPriceMap[getToday()]
			                                ? todayIndex.seafoodAvgPriceMap[
			                                      getToday()
			                                  ].toFixed(2)
			                                : 0
			                        }}</view>
					<view class="em" v-if="todayIndex.seafoodAvgPriceMap.dateContrast == 0">--</view>
					<image v-if="todayIndex.seafoodAvgPriceMap.dateContrast != 0" :src="
			                            validate(
			                                todayIndex.seafoodAvgPriceMap.dateContrast
			                            )
			                                ? 'https://oss-shop.cciinet.com/files/MiniProgram/rise.png'
			                                : 'https://oss-shop.cciinet.com/files/MiniProgram/decline.png'
			                        " />
				</view>
			</view>
			<view class="offer">
				<view class="offer_title">
					<text class="h1">冻品头条</text>
				</view>
				<!-- <image src="~assets/right.svg" alt="" /> -->
			</view>
			<view class="headlines_con">
				<view
					class="headlines"
					@click="$handleOpenUrl(`/pages/article/detail?id=${item.id}`,99)"
					v-for="item in headlines"
					:key="item.id"
				>
					<view class="headlines_info">
						<text class="h1">
							{{ item.title }}
						</text>
						<view class="info_time">
							<p>{{ item.categoryName }}</p>
							<span class="span">{{
								item.created_date | formatInterval
							}}</span>
						</view>
					</view>
					<image :src="item.newsCover" alt="" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getSlideShows,
		getAdList
	} from "@/api/common/index.js"
	import {
		getOfferPriceIndex,
		getTodayIndex,
		getHostSaleProduct,
		getGroupProductList
	} from "@/api/home/index.js"
	import {
		getSupplyInfoBySupply,
	} from "@/api/shop/index.js";
	import {
		getArticleList,
		getNewCircleList
	} from "@/api/circle/index.js";
	import { $handleStatistcs } from "@/utils/statistics.js"
	export default {
		data() {
			return {
				imgs: [],
				priceIndex: [],
				todayIndex: {
					seafoodAvgPriceMap: {},
					meatAvgPriceMap: {}
				},
				saleProduct: [],
				userId: "",
				groupProductList: [],
				headlines: [],
				circleList: [],
				adList: [],
				timer: "",
				animateUp: false,
				isShowDownload: true,
				isLoad: 1,
				iconUrl: "",
			}
		},
		onLoad() {
			this.handleGetSlideShows() // 轮播图
			// this.getOfferPriceIndex() // 报价板
			this.getTodayIndex() // 今日指数
			this.getHostSaleProduct() // 供应推荐
			this.handleGroupProductList() // 拼团商品
			this.getHeadlines() // 冻品头条
			this.getCircleList() // 生意圈
			this.handleGetAdList() // 可配置的5个入口
			this.handleIconImg() // 发布供求广告大图
			this.timer = setInterval(() => {
				this.handleScroll()
			}, 2000);
		},
		onPullDownRefresh() {
			this.handleGetSlideShows()
			this.getTodayIndex()
			this.getHostSaleProduct()
			this.handleGroupProductList()
			this.getHeadlines()
			this.getCircleList()
			this.handleGetAdList()
			this.handleIconImg()
		},
		onShow() {
			this.isShowDownload = true
			this.userId = uni.getStorageSync("userId")
			if (this.isLoad == 2) {
				this.getHostSaleProduct();
				this.isLoad = 1
			}
			$handleStatistcs()
		},

		methods: {
			handleJump(url) {
				if (url) {
					const pageUrlList = ['/pages/home/index', '/pages/shop/index', '/pages/circle/index', '/pages/find/index', '/pages/profile/index'];
					if (pageUrlList.includes(url)) {
						// switchTab跳转
						this.$handleOpenUrl(url, 0)
					} else {
						this.$handleOpenUrl(url)
					}
				} else {
					// 合作
					this.$handleOpenUrl('')
				}
			},
			handleJumpurl(url) {
				this.$handleOpenUrl(url,uni.getSystemInfoSync().platform == 'ios'?99:1)
			},
			async handleGetAdList() {
				let res = await getAdList({adPositionId: 922});
				if (res.code == 0) {
					this.adList = res.data.adList
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async handleIconImg() {
				let res = await getAdList({adPositionId: 927});
				if (res.code == 0) {
					this.iconUrl = res.data.adList[0].path
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			handleLink(v) {
				window.location.href = v;
			},
			handleScroll() {
				this.animateUp = true
				setTimeout(() => {
					let d = this.circleList
					d.push(d[0])
					d.shift()
					this.animateUp = false
				}, 1000)
			},
			handleBuy(v, i) {
				const userId = uni.getStorageSync('userId');
				if (v.status == 2) {
					uni.showToast({
						title: "拼团活动已结束",
						icon: "none"
					})
					return;
				}
				this.$handleOpenUrl(
					`/pages/home/details?pName=${v.productName}&price=${v.productPrice}&rate=${v.rate}&index=${i}&url=${v.image}`,uni.getSystemInfoSync().platform == 'ios'?99:1)
			},
			handleShowText(txt) {
				if (txt.length > 100) {
					return txt.substr(0, 100) + '...全文'
				}
				return txt
			},
			async getHeadlines() {
				let res = await getArticleList({
					page: 1,
					limit: 3,
					articleCategoryId: "",
					title: ""
				});
				if (res.code == 0) {
					this.headlines = res.data.articleList;
				} else {
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			},
			async getCircleList() {
				let res = await getNewCircleList({
					content: '',
					current: 1,
					pageSize: 10,
					openid: '',
					userId: ''
				})
				if (res.code == 0) {
					this.circleList = res.data.content
					this.circleList.map(v => {
						v.createDate = v.createDate.replace(/-/g, "/")
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			handleLogin() {
				this.$handleOpenUrl("/pages/login/index")
			},
			handleGetSlideShows() {
				getSlideShows({
					positionId: 802
				}).then(res => {
					if (res.code == 0) {
						this.imgs = res.data
						uni.stopPullDownRefresh();
					}
				})
			},
			async handleGroupProductList() {
				let res = await getGroupProductList()
				if (res.code == 0) {
					this.groupProductList = res.data
				}
			},
			async getOfferPriceIndex() {
				let res = await getOfferPriceIndex("");
				if (res.code == 0) {
					let z = [],
						n = [],
						y = [];
					res.data.map((v) => {
						if (v.type == 1 && z.length == 0) {
							z.push(v);
						}
						if (v.type == 2 && n.length == 0) {
							n.push(v);
						}
						if (v.type == 3 && y.length == 0) {
							y.push(v);
						}
					});
					this.priceIndex = [...z, ...n, ...y];
				}
			},
			async getTodayIndex() {
				let res = await getTodayIndex({
					endDate: this.getToday(),
					startDate: this.getDate()
				});
				if (res.code == 0) {
					this.todayIndex = res.data;
				}
			},
			async getHostSaleProduct() {

				getSupplyInfoBySupply({
					page:{
						current: 1,
						size: 3,
						desc:["create_date"],
					},
					shopSupplyDemand:{
						type:0,
						userId:uni.getStorageSync("userId")||""
					}
				}).then((res) => {
					if (res.code === 0) {
						this.saleProduct = res.data.records;
					}
				});
				// let res = await getHostSaleProduct({isHostSale:1});
				// if (res.code == 0) {
				// 	this.saleProduct = res.data;
				// } 
			},
			getToday() {
				let monthDate = new Date();
				let newDate = new Date(monthDate.getTime() - 24 * 60 * 60 * 1000);
				let Year = newDate.getFullYear();
				let Month =
					newDate.getMonth() < 9 ?
					"0" + (newDate.getMonth() + 1) :
					newDate.getMonth() + 1;
				let Day =
					newDate.getDate() < 10 ?
					"0" + newDate.getDate() :
					newDate.getDate();
				return Year + "-" + Month + "-" + Day;
			},
			getDate() {
				let monthDate = new Date();
				let newDate = new Date(
					monthDate.getTime() - 2 * 24 * 60 * 60 * 1000
				);
				let Year = newDate.getFullYear();
				let Month =
					newDate.getMonth() < 9 ?
					"0" + (newDate.getMonth() + 1) :
					newDate.getMonth() + 1;
				let Day =
					newDate.getDate() < 10 ?
					"0" + newDate.getDate() :
					newDate.getDate();
				return Year + "-" + Month + "-" + Day;
			},
			validate(num) {
				var reg = /^\d+(?=\.{0,1}\d+$|$)/;
				if (reg.test(num)) return true;
				return false;
			},
		}
	}
</script>
<style scoped lang="scss">
	.home-container {
		width: 100%;
		height: 100%;
		background-color: #F7F9FE;
		padding-bottom: 40upx;
		.download {
			position: sticky;
			top: 0;
			left: 0;
			width: 750upx;
			height: 88upx;
			display: flex;
			align-items: center;
			color: #fff;
			// padding: 0 34upx;
			background: rgba(0, 0, 0, .8);
			z-index: 999999;
			.icon1 {
				width: 21upx;
				height: 22upx;
				background: url("https://oss-shop.cciinet.com/files/MiniProgram/download_close.png") no-repeat;
				background-size: 100%;
				margin: 0 53upx 0 34upx;
			}
			.icon2 {
				width: 64upx;
				height: 64upx;
				background: url("https://oss-shop.cciinet.com/files/MiniProgram/download_icon.png") no-repeat;
				background-size: 100%;
				margin-right: 17upx;
			}
			.tips {
				font-size: 26upx;
			}
			.icon3 {
				width: 176upx;
				height: 54upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30upx;
				font-style: normal;
				background: url("https://oss-shop.cciinet.com/files/MiniProgram/download_bg.png") no-repeat;
				background-size: 100%;
				margin-left: 39upx;
			}
		}
		.home-body {
			height: 100%;
			padding: 27upx 31upx 0upx 31upx;

			.home-banner {
				height: 236upx;

				.swiper {
					width: 100%;
					height: 236upx;
					border-radius: 10upx;

					swiper-item {
						border-radius: 10upx;
					}

					image {
						width: 100%;
						height: 236upx;
						border-radius: 10upx;
					}
				}
			}

			.servie_more {
				height: 172upx;
				background: #fff;
				border-radius: 10upx;
				margin-top: 25upx;

				.ul {
					height: 172upx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.li {
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;

						.img1 {
							width: 98upx;
							height: 98upx;
						}

						.img2 {
							width: 29upx;
							height: 16upx;
							position: absolute;
							top: 80upx;
							right: 0;
						}

						.span {
							color: #666666;
							font-size: 24upx;
							margin-top: 8upx;
						}
					}
				}
			}
			
			.ad_icon {
				display: flex;
				margin-top: 32upx;
				.ad_img {
					margin: 0 auto;
				}
			}

			.offer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 32upx;

				.offer_title {
					display: flex;
					align-items: flex-end;

					.h1 {
						font-size: 36upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
						line-height: 1;
					}

					.span {
						display: inline-block;
						width: 101upx;
						height: 32upx;
						background: #ec5306;
						border-radius: 14upx;
						font-size: 20upx;
						color: #ffffff;
						text-align: center;
						line-height: 32upx;
						margin-left: 8upx;
					}
				}

				image {
					margin-right: 16upx;
					width: 30upx;
					height: 19upx;
				}
			}
			
			.headlines_con {
				margin-top: 16upx;
				.headlines {
					display: flex;
					justify-content: space-between;
					padding: 16upx;
					// width: 100%;
					height: 180upx;
					background: #fff;
					border-radius: 8upx;
					margin-bottom: 8upx;
	
					image {
						width: 264upx;
						height: 149upx;
						object-fit: cover;
					}
					.headlines_info {
						width: 370upx;
						position: relative;
						.h1 {
							font-size: 26upx;
							color: #333333;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						.info_time {
							position: absolute;
							bottom: 0upx;
							width: 100%;
							display: flex;
							justify-content: space-between;
							p {
								width: 123upx;
								height: 32upx;
								background: #f0f3ff;
								border-radius: 16upx;
								text-align: center;
								line-height: 32upx;
								font-size: 20upx;
								color: #00428e;
								white-space: nowrap;
							}
							span {
								font-size: 20upx;
								color: #999999;
								float: right;
							}
						}
					}
				}
			}

			.new-circle {
				height: 240upx;
				overflow: hidden;
				margin-top: 20upx;
				border-radius: 8upx;
				background-color: #fff;

				.new-circle-item {
					// margin: 10upx 0;
					height: 100%;
					overflow: hidden;

					.top {
						display: flex;

						.left {
							width: 120upx;

							image.avatar {
								width: 80upx;
								height: 80upx;
								margin: 20upx;
							}
						}

						.right {
							width: calc(100% - 120upx);
							margin-right: 20upx;

							.title {
								display: flex;
								justify-content: space-between;
								align-items: center;
								height: 65upx;

								.name {
									display: inline-block;
									width: 400upx;
									color: #00428e;
								}
							}

							.content {
								p {
									line-height: 1.5;
									word-break: break-all;
								}
							}

							.imgs {
								display: flex;
								justify-content: flex-start;
								margin-top: 15upx;

								view {
									image {
										width: 190upx;
										height: 190upx;
										margin-left: 5upx;
										object-fit: cover;
									}
								}
							}

							.video_box {
								height: 330upx;
								margin-top: 15upx;
								border-radius: 8upx;

								#poster {
									position: relative;
									float: left;
									height: 100%;

									image {
										max-height: 100%;
										max-width: 100%;
									}

									.iconfont {
										position: absolute;
										top: 135upx;
										left: calc(50% - 30upx);
										z-index: 666;
										font-size: 60upx;
										color: #fff;
									}
								}
							}
						}
					}
				}

				.anim {
					transition: all 0.5s ease-in-out;
					transform: translateY(-240upx);
				}
			}

			.offer_content {
				display: flex;
				margin-top: 16upx;

				.offer_item {
					width: 100%;
					height: 204upx;
					background: #fff;
					margin-right: 16upx;
					padding-left: 16upx;
				}

				.offer_item:last-child {
					margin-right: 0upx;
				}

				.h2 {
					padding-top: 20upx;
					font-size: 26upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}

				.p {
					font-size: 36upx;
					color: #1bb75a;
					padding-top: 16upx;
					font-weight: bold;
				}

				.offer_num {
					margin-top: 20upx;
					display: flex;

					.span {
						font-size: 20upx;
						color: #999999;
					}

					.i {
						font-size: 24upx;
						color: #1bb75a;
						margin-left: 8upx;
					}
				}
			}

			.todayIndex {
				margin-top: 16upx;
				width: 100%;
				height: 80upx;
				background: url("https://oss-shop.cciinet.com/files/MiniProgram/index_today_bg.png") no-repeat;
				background-size: 100% 100%;
				display: flex;
				align-items: center;

				.today {
					width: 133upx;
					height: 44upx;
					background: url("https://oss-shop.cciinet.com/files/MiniProgram/today_bg.png") no-repeat;
					background-size: 100% 100%;
					margin-left: 19upx;
					text-align: center;
					line-height: 44upx;
					font-weight: bold;
					color: #ffffff;
					font-size: 26upx;
				}

				.index {
					width: 226upx;
					height: 46upx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					background: #ffffff;
					opacity: 0.74;
					border-radius: 23upx;
					margin-left: 25upx;

					.p {
						font-size: 28upx;
						color: #333333;
					}

					.span {
						font-size: 30upx;
						font-weight: bold;
						color: #1bb75a;
					}

					.rice {
						color: #ea5520;
					}

					image {
						width: 38upx;
						height: 20upx;
					}
				}
			}

			.product {
				display: flex;
				margin-top: 16upx;

				.product_item {
					width: 218upx;
					height: 352upx;
					background: #fff;
					margin-left: 16upx;
					border-radius: 8upx;
					position: relative;

					.icon {
						position: absolute;
						top: 0;
						left: 5upx;
						height: 35upx;
						display: flex;
						// justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 22upx;
						font-style: normal;
						padding-left: 5upx;
						z-index: 99;
					}

					.w_1 {
						width: 95upx;
						background: url('https://oss-shop.cciinet.com/files/MiniProgram/snapUp_1.png') no-repeat;
						background-size: 100% 100%;
					}

					.w_2 {
						width: 116upx;
						background: url('https://oss-shop.cciinet.com/files/MiniProgram/snapUp_2.png') no-repeat;
						background-size: 100% 100%;
					}

					.w_3 {
						width: 95upx;
						background: url('https://oss-shop.cciinet.com/files/MiniProgram/snapUp_3.png') no-repeat;
						background-size: 100% 100%;
					}

					image {
						padding: 5upx;
						width: 100%;
						height: 198upx;
					}

					.btn {
						margin-top: 20upx;
						width: 200upx;
						height: 60upx;
						line-height: 60upx;
						border-radius: 30upx;
						border: 0;
						background: linear-gradient(87deg, #035ABE, #218EED);
						color: #fff;
						font-size: 24upx;
						margin-left: 50%;
						transform: translateX(-50%);
					}

					.h2 {
						padding: 5upx;
						font-size: 26upx;
						color: #333333;
						line-height: 1;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.p {
						padding-left: 8upx;
						padding-top: 18upx;
						color: #ea5520;
						font-size: 32upx;
						font-weight: bold;

						.span {
							font-size: 26upx;
							padding-left: 16upx;
							font-weight: normal;
						}
					}
				}

				.product_item:first-child {
					margin-left: 0;
				}
			}

		}
	}
</style>
